<template>
	<view class="container">
		
		<ly-tree  ref="tree" :tree-data="list"
		:props="props"
		node-key="id" 
		check-on-click-node 
		show-checkbox 
		default-expand-all 
		:default-checked-keys="checkedKeys"
		:expandOnClickNode='false'
		v-model="menuIds"
		>
		</ly-tree>
		<view class="submit-view">
			<button class='submit'  @tap="clickBtn">完成</button>
		</view>
	</view>
</template>
<script>
	import { getMenuSimple,getMenuData,assignRoleMenu} from '@/api/system/system.js'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default{
		components: {
			LyTree
		},
		data(){
			return{
				id:null,
				props: function() {
					return {
						 label: 'name', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				list:[],
				checkedKeys:[],
				menuIds:[]
				
			}
		},
		onLoad(e) {
			if(e.id != null && e.id != ''){
				this.id = e.id
				this.getData()
			}
			this.getList();
		},
		created() {
			
		},
		methods:{
			getList(){
				getMenuSimple().then(res=>{
					this.list = this.handleTree(res.data,'id');
					this.ready = true
				})
			},
			getData(){
				let data={
					roleId:this.id
				}
				getMenuData(data).then(res=>{
					this.checkedKeys=res.data
				})
			},
			clickBtn(){
				let data={
					menuIds:this.$refs.tree.getCheckedKeys(),
					roleId:this.id
				}
				assignRoleMenu(data).then(res=>{
					if(res.data === true){
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			getCheckedNodes() {
					console.log('getCheckedNodes', this.$refs.tree.getCheckedNodes());
				},
				
				getCheckedKeys() {
					console.log('getCheckedKeys', this.$refs.tree.getCheckedKeys());
				},
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #fff;
		height: 100vh;
		/deep/ .ly-tree-node__content{
			border-radius: 5px;
			border: 1px solid #F9EDED;
			font-size: 14px;
			font-family: Inter-Regular, Inter;
			font-weight: 400;
			color: #000000;
			padding:20px 5px;
			margin-bottom: 20rpx;
		}
		.submit{
			color: #fff;
			width: 100px;
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			background: #508CFF;
			border-radius: 5px 5px 5px 5px;
			position: fixed;
			bottom: 50px;
			left: 36%;
		}
	}
</style>